<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
    <title>Title</title>
    <link rel="stylesheet" href="css/common.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <style>
        html,body{height: 100%}
        #content{
            background: url("./img/caizd-back.jpg") no-repeat;
            background-size: 100% 100%;
        }
        .bottomLink{
            position: absolute;
            left: 0;
            width: 100%;
            height: 20px;
            bottom: 10px;
            text-align: center;
            font-size: 15px;
            color: rgba(255,255,255,0.3);
        }
        #charBox{
            position: absolute;
            left: 6%;
            top:45%;
            width: 88%;
        }
        .countBox{
            position: absolute;
            width: 60%;
            top:-40px;
            left: 20%;
            text-align: center;
            height: 28px;
            line-height: 28px;
            background: white;
            box-shadow: 0 0 3px 0 #b8b8b8;
            border-radius: 4px;
            color: #fa741c;
        }
        .countBox .tex{
            position: absolute;
            left: 10%;
            top:0px;
        }
        .tangleBox{
            position: absolute;
            left: 25%;
            width: 50%;
            bottom: 33%;
        }
        .tangleBox .zhu{
            background: #fdf001;
            position: absolute;
            left: 0;
            bottom: 0;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            width: 25px;
            height: 100px;
            box-shadow: 0 2px 3px 0 #afce70;
            transition: all 1s;
        }
        .tangleBox .zhu1{
            left: 0;
        }
        .tangleBox .zhu2{
            left: 45px;
        }
        .tangleBox .zhu3{
            left: 95px;
        }
        .tangleBox .zhu4{
            left: 145px;
        }
        .btnBox{
            padding: 0 30px;
            position: absolute;
            left: 0;
            width: 100%;
            box-sizing: border-box;
            bottom: 80px
        }
        .btnBox .btnBu{
            background-size: 100% 100%!important;
            width: 100px;
            height: 40px;
        }
        .btnBox .btnBu:active{
            background-size: 100% 105%!important;
        }
        .btnBox .zhang{
            float: left;
            background: url("./img/caizd-btn-zhang_03.png") no-repeat;
        }
        .btnBox .die{
            float: right;
            background: url("./img/caizd-btn-die_03.png") no-repeat;
        }
    </style>
</head>
<body>
<div id="content" class="h100 w100 pr">
    <div id="charBox">
        <div class="countBox x-fs-090">
            <span class="tex x-fs-060">当前指数</span>
            <span>{{oldCount}}</span>
        </div>
        <div class="imgBox">
            <img src="./img/caizd-diban_03.png" alt="">
        </div>
        <div class="tangleBox">
            <div class="zhu zhu1" v-bind:style="{height: zhu1 + 'px'}"></div>
            <div class="zhu zhu2" v-bind:style="{height: zhu2 + 'px'}"></div>
            <div class="zhu zhu3" v-bind:style="{height: zhu3 + 'px'}"></div>
            <div class="zhu zhu4" v-bind:style="{height: zhu4 + 'px'}"></div>
        </div>
    </div>
    <div class="btnBox clear">
        <div class="btnBu zhang"></div>
        <div class="btnBu die"></div>
    </div>
    <div class="bottomLink">
        <span>我的奖品</span>&nbsp;&nbsp;&nbsp;
        |
        &nbsp;&nbsp;&nbsp;<span>活动规则</span>
    </div>
</div>
<script>
 new Vue({
     el: '#content',
     data:{
         zhu1: 100,
         zhu2: 100,
         zhu3: 100,
         zhu4: 100,
         oldCount: 100,
         newCount: 0,
         countInter: null, //数字动画计时器
         randomInter: null //产生随机数的定时器
     },
     created(){
         this.randomHeight();
         var _this = this;
         var i = 4;
         setTimeout(function(){
             i--;
             _this.randomHeight();
         },4000)
     },
     methods:{
         randomHeight(){
             let _this = this;
             if(!this.randomInter){
                 this.randomInter = setInterval(function(){
                     for(let i = 1; i < 5; i++){
                        _this['zhu' + i] = Math.ceil(Math.random() * 99) + 1;
                     }
                     _this.newCount = _this.getCount();
                     _this.setCountAni();
                 },1000)
             }else{
                 clearInterval(this.randomInter);
                 this.randomInter = null;
             }
         },
         setCountAni(){
             var ja = (this.newCount - this.oldCount) > 0 ? 1 : -1;
             var _this = this;
             if(!this.countInter){
                 this.countInter = setInterval(function(){
                     if(_this.oldCount == _this.newCount|| _this.oldCount <= 0){
                         _this.clearCountAni();
                     }else{
                         _this.oldCount += ja;
                     }
                 },50)
             }else{
                 _this.clearCountAni();
             }
         },
         clearCountAni(){
             if(this.countInter){
                 this.oldCount = this.newCount;
                 clearInterval(this.countInter);
                 this.countInter = null;
             }
         },
         getCount(){
             let all = this.zhu1 + this.zhu2 + this.zhu3 + this.zhu4;
             return Math.ceil(all / 4);
         }
     }
 })
</script>
</body>
</html>